<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="getPrescriptionData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState" :label-col="{ style: { width: '70px' } }">
        <a-form-item name="dateRange" label="日期范围" class="w-[330px]">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="flex flex-wrap">
        <div
          v-for="(item, index) in analysisList"
          :key="index"
          class="analysis-item rounded-md w-[230px] h-[100px] cursor-pointer"
          @click="onClickDetail(item)"
        >
          <div class="h-[48px] flex items-center pl-4">{{ item.title }}</div>
          <a-divider class="my-0" />
          <div class="h-[48px] flex items-center pl-4" style="font-size: 18px" :class="{ 'text-primary': item.status }">
            {{ item.price ? '￥' + item.content : item.content }}
          </div>
        </div>
      </div>
      <div class="mt-5 pl-20">西成药占比</div>
      <div id="chart" style="width: 240px; height: 240px"></div>
    </a-card>
    <Edit v-model:open="editOpen" :date-range="formState.dateRange" :row-data="rowData" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import useUserStore from '@/store/user'
import echarts from '@/utils/echarts'
import Edit from './Edit.vue'

const { empId } = useUserStore()
const rowData = ref({})
const editOpen = ref(false)
const formRef = ref(null)
const percentage = ref(0)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const analysisList = ref([
  { id: 1, title: '西成药处方数', content: 0, status: 1 },
  { id: 2, title: '西成药处方实际金额', content: 0, price: true },
  { id: 3, title: '西成药平均处方金额', content: 0, price: true },
  { id: 4, title: '中草药处方数', content: 0, status: 2 },
  { id: 5, title: '中草药处方实际金额', content: 0, price: true },
  { id: 6, title: '中草药平均处方金额', content: 0, price: true },
  { id: 7, title: '总金额', content: 0, price: true },
  { id: 8, title: '药品金额', content: 0, price: true },
  { id: 9, title: '人次', content: 0 },
  { id: 10, title: '均次费用', content: 0, price: true },
  { id: 11, title: '均药', content: 0, price: true },
  { id: 12, title: '总处方数', content: 0 }
])

const drawChart = () => {
  const chartDom = document.getElementById('chart')
  const myChart = echarts.init(chartDom)
  const option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '70%'],
        detail: {
          formatter: '{value}%',
          color: '#222222'
        },
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 15,
            color: [
              [0.2, '#2e95f7'],
              [0.8, '#5abf39'],
              [1, '#f6aa3f']
            ]
          },
          show: true
        },
        axisTick: {
          show: true,
          splitNumber: 4,
          lineStyle: {
            color: 'auto',
            width: 1
          },
          length: 5
        },
        axisLabel: {
          show: true,
          distance: 12
        },
        splitLine: {
          show: true,
          length: 10,
          lineStyle: {
            color: 'auto'
          }
        },
        pointer: {
          show: true,
          length: '50%',
          width: '10'
        },
        itemStyle: {
          color: '#17324d'
        },
        radius: '100%',
        startAngle: 185,
        endAngle: -5,
        min: 0,
        max: 100,
        splitNumber: 10, //刻度数量
        animation: true,
        data: [
          {
            value: percentage.value
          }
        ]
      }
    ]
  }

  myChart.setOption(option)
}

const onClickDetail = (row) => {
  if (row.status) {
    rowData.value = { ...row }
    editOpen.value = true
  }
}

const getPrescriptionData = async () => {
  const { data, code, msg } = await post('outp/outpComprehensive/getPrescriptionStatistics', {
    stdate: formState.value.dateRange?.[0],
    eddate: formState.value.dateRange?.[1],
    ysbh: empId
  })
  if (code !== 0) return message.error(msg)
  analysisList.value[0].content = data.westernNumber || 0
  analysisList.value[1].content = data.westernAmount || 0
  analysisList.value[2].content = data.westernAverageAmount || 0
  analysisList.value[3].content = data.medicinalHerbNumber || 0
  analysisList.value[4].content = data.medicinalHerbAmount || 0
  analysisList.value[5].content = data.medicinalHerbAverageAmount || 0
  analysisList.value[6].content = data.totalAmount || 0
  analysisList.value[7].content = data.medicineAmount || 0
  analysisList.value[8].content = data.persons || 0
  analysisList.value[9].content = data.averageExpenses || 0
  analysisList.value[10].content = data.averageMedicineExpenses || 0
  analysisList.value[11].content = data.totalNumber || 0
  percentage.value = data.westernOccupancy || 0
  drawChart()
}

onMounted(() => {
  getPrescriptionData()
  drawChart()
})
</script>
<style lang="less" scoped>
.analysis-item {
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}
</style>
